import Vue from 'vue'
import BScroll from '@better-scroll/core'
import PullDown from '@better-scroll/pull-down'
import tabs from '../../components/tabs/index.vue'
import headss from '../../components/header/index.vue'
import Pullup from '@better-scroll/pull-up'
import { list } from 'postcss'
import VueLazyload from 'vue-lazyload'
import { getnycy } from '../../api/shouye.js'
import { Row } from 'vant'
const loadimage = require('../../assets/image/animation_200_l11hgz7y.gif')
// const loadimage = require('./assets/loading.gif')
// const errorimage = require('./assets/error.gif')
Vue.use(VueLazyload, {
  preLoad: 1.3,
  // error: errorimage,
  loading: loadimage,
  attempt: 1
})

BScroll.use(Pullup)
BScroll.use(PullDown)
function generateData() {
  const BASE = 30
  const begin = BASE * STEP
  const end = BASE * (STEP + 1)
  const ret = []
  for (let i = end; i > begin; i--) {
    ret.push(i)
  }
  return ret
}
const TIME_BOUNCE = 800
const REQUEST_TIME = 1000
const THRESHOLD = 70
const STOP = 56
let STEP = 0
export default {
  data() {
    return {
      beforePullDown: true,
      isPullingDown: false,
      head:false,
      // 下拉架子更多
      isPullUpLoad: false,
      listname:[{
        name:'关注'				
      },{
        name:'养犬宝典'				
      },{
        name:'行为运动'				
      },{
        name:'健康百科'				
      }],	
      actives:0,
      scroll:0,
      dataList: generateData(),
      list: [
       
      ],
      left:[],
      right:[],
      flog:true,
      page:1
    }
  },
  components:{
    tabs,
    headss
  },
  mounted() {
    this.initBscroll()
    const that = this
    // 懒加载监听回调
    this.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
      that.bscroll.refresh()
      // console.log('我今天了')
    })
    this.bscroll.autoPullDownRefresh()
    // 监听事件
    window.onresize = () => {
      return (() => {
        this.bscroll.refresh()
      })()
    }
  },
  // beforeDestroy() {
  //   this.bscroll.destroy()
  // },
  beforeDestroy() {
    this.bscroll.destroy()
  },
  activated(){
    if (this.bscroll){
      this.bscroll.refresh()
      this.bscroll.scrollTo(0,this.scroll, 0)
    }
  },
  deactivated(){
    this.scroll = this.bscroll.y
  },
  methods: {
    initBscroll() {
      this.bscroll = new BScroll(this.$refs.bsWrapper, {
        scrollY: true,
        bounceTime: TIME_BOUNCE,
        useTransition: false,
        pullUpLoad: true,
        probeType:1,
        pullDownRefresh: {
          threshold: THRESHOLD,
          stop: STOP
        }
      })
      this.bscroll.on('pullingUp', this.pullingUpHandler)
      this.bscroll.on('pullingDown', this.pullingDownHandler)
      this.bscroll.on('scroll', this.scrollHandler)
      this.bscroll.on('scrollEnd', e => {      
      })
    },
    // 下拉加载更多
    async pullingUpHandler() {
      this.isPullUpLoad = true
      STEP += 1
      // await this.requestData()    
      setTimeout(() => {
        this.init()
        this.isPullUpLoad = false
        this.bscroll.finishPullUp()
        this.bscroll.refresh()
      }, 1000) 
    },
    scrollHandler(pos) {
      // console.log(pos.y)
      if (pos.y > 70){
        this.flog = false
      } else {
        this.flog = true
      }
    },
    // 下拉刷新
    async pullingDownHandler() {
      console.log('大傻逼')
      // console.log('trigger pullDown')
      this.list = []
      this.left = []
      this.right = []
      this.beforePullDown = false
      this.isPullingDown = true
      STEP = 1
      setTimeout(() => {
        this.isPullingDown = false
        this.finishPullDown()
        this.init()
      },10)   
    },
    async finishPullDown() {
      this.bscroll.finishPullDown()
      setTimeout(() => {
        this.beforePullDown = true
        this.bscroll.refresh()
      }, TIME_BOUNCE + 100)
    },
    change(){
      console.log('我改变了')
    },
    search(){
      this.$router.push({
        name:'search'
      })   
    },
    goto(){
      this.$router.go(-1)
    },
    images(e){
      console.log(e,'哈哈笑死我了')
    },
    async init() {
      console.log(STEP,'大沙地')
      // let num = 0  
      // const pp =  setInterval(() => {
      //   num++
      //   if(num >=10){       
      //     clearInterval(pp)
      //   }
       
      // },10); 
      // this.$nextTick(() => {
      //    this.bscroll.refresh()   
      // })  
      this.stats()  
      // for(let i = 0;i<10;i++){
      //    await this.stats(i)
      // } 
    },
    stats(i){
      // const tt = {
      //   name:'酷揭秘！为什呢你的狗狗不愿意睡狗窝！',
      //   id:new Date().getTime(),
      //   img:'https://lanhu.oss-cn-beijing.aliyuncs.com/psl2m0ms8jsfv8b25b6dj6hg7ajuzcifefd206ee2e-26e3-4c2d-aee3-204967d8e5a3'
      // }
      // const ppp = {
      //   name:'酷揭秘！为什呢你的狗狗不愿意睡狗窝！',
      //   id:new Date().getTime(),
      //   img:'https://lanhu.oss-cn-beijing.aliyuncs.com/ps92hmxjs7k89rq44yv09a7a9vr967pms7m06861fe8-b856-4369-9cf4-de935614bf72'
      // }
      getnycy({ page:STEP }).then(res => {
        res.data.forEach(item => {
          this.polt(item)         
          // this.poit)           
        })
        // for(var i=0;i<res.data.length;i++){            
        // }  
      })
      // this.list.push(ppp)  
    },
    polt(item){
      var img = new Image()
      img.src = item.img
      img.onload = img.onerror = (e) => {
        item.imgHeight = Math.round(img.height * 174 / img.width)
        // console.log(item,'傻逼')
        // console.log(this.$refs.left.offsetHeight,this.$refs.right.offsetHeight,'傻逼')
        // 判断左边的高度和右边的高度
        if (this.$refs.left.offsetHeight < this.$refs.right.offsetHeight) {
          this.left.push(item)
          this.$nextTick(() => {
            this.bscroll.refresh()  
          })
        } else if (this.$refs.left.offsetHeight > this.$refs.right.offsetHeight) {
          this.right.push(item)
          this.$nextTick(() => {
            this.bscroll.refresh()  
          })
        } else {
          // 这里是为了保证第一和第二张添加时，左右都能有内容
          // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
          if (this.$refs.left.offsetHeight <= this.$refs.right.offsetHeight) {
            this.left.push(item)
            this.$nextTick(() => {
              this.bscroll.refresh()  
            })
          } else {
            this.right.push(item)
            this.$nextTick(() => {
              this.bscroll.refresh()  
            })
          }
        }
        
        console.log(item.imgHeight,'哈哈笑死跌了')
      }
    }
  }
}
